<template name="work">
	<view>
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">首页</block>
		</cu-custom>

		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
			indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.page_image" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 公告 -->
		<view class="adsec light bg-white margin-top-sm linec">
			<text class=" padding-left cuIcon-notification line-red" style="font-size: 50rpx;"> </text>
			<swiper class="swiper_container" autoplay="true" circular="true" interval="2000"  >
				<swiper-item v-for="(item,index) in notelist" :key="index">
					<view class="bg-white padding-left text-black">
						<text class="details margin-left">{{item.title}}</text>
					</view>
				</swiper-item>
				 
			</swiper>
		</view>

		<!-- 占位 -->
		<view class="cu-bar bg-white solid-bottom ">
			<view class="action">
				<text class="cuIcon-titles text-orange "></text> 常用功能
			</view>
		</view>
		<view class="cylist flex flex-childsub bg-white align-center"
			style="justify-content: center; align-items: center;">
			<view class="padding-sm">
				<view class=" bg-menu padding radius text-center shadow-blur">
					<navigator class="content flex-childsub" hover-class="none" url="../work/goodlist?pid=0"
						open-type="navigate">
						<!-- <text class="text-lg cuIcon-search ">&emsp;&emsp;商品信息</text> -->
						<image src="../../static/img/a1.png" style="width: 40px;height: 40px;" class="nav-image">
						</image>
					</navigator>
					<text class="nav-text">商品信息</text>
				</view>

				</navigator>
			</view>
			<view class="padding-sm" v-if="userInfo.usertype=='0'">
				<view class="bg-menu padding radius text-center shadow-blur">
					<navigator class="content flex-childsub" hover-class="none" url="../work/goodedit"
						open-type="navigate">
						<image src="../../static/img/a1.png" style="width: 40px;height: 40px;" class="nav-image">
						</image>
					</navigator>
					<text class="nav-text ">&emsp;&emsp;商品出库</text>
				</view>
			</view>
			<view class="padding-sm" v-if="userInfo.usertype=='0'">
				<view class="bg-menu padding radius text-center shadow-blur">
					<navigator class="content flex-childsub" hover-class="none" url="../work/goodeditinput"
						open-type="navigate">
						<image src="../../static/img/a1.png" style="width: 40px;height: 40px;" class="nav-image">
						</image>

					</navigator>
					<text class="nav-text ">&emsp;&emsp;商品入库</text>
				</view>
			</view>

			<view class="padding-sm">
				<view class=" bg-menu padding radius text-center shadow-blur">
					<navigator class="content flex-childsub" hover-class="none" url="../work/goodrecord?pid=0"
						open-type="navigate">
						<image src="../../static/img/a1.png" style="width: 40px;height: 40px;" class="nav-image">
						</image>
						<!-- <text style="width: 40px;height: 40px;" class="text-xxl  cuIcon-edit "> </text> -->
					</navigator>
					<text class="nav-text ">&emsp;&emsp;记录追溯</text>
				</view>
			</view>
			<view class="padding-sm" v-if="userInfo.usertype=='0'">
				<view class=" bg-menu padding radius text-center shadow-blur">
					<navigator class="content flex-childsub" hover-class="none" url="../work/goodreport?pid=0"
						open-type="navigate">
						<image src="../../static/img/a1.png" style="width: 40px;height: 40px;" class="nav-image">
						</image>
						<!-- <text style="width: 40px;height: 40px;" class="text-xxl  cuIcon-edit "> </text> -->
					</navigator>
					<text class="nav-text ">&emsp;&emsp;统&emsp;&emsp;计</text>
				</view>
			</view>
			<view class="padding-sm">
				<view class=" bg-menu padding radius text-center shadow-blur">
					<navigator class="content flex-childsub" hover-class="none" url="../work/goodalarm?pid=0"
						open-type="navigate">
						<image src="../../static/img/a1.png" style="width: 40px;height: 40px;" class="nav-image">
						</image>
						<!-- <text style="width: 40px;height: 40px;" class="text-xxl  cuIcon-edit "> </text> -->
					</navigator>
					<text class="nav-text ">&emsp;&emsp;预&emsp;&emsp;警</text>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: "work",
		data() {
			return {
				isDoRefresh: false,
				CustomBar: this.CustomBar,
				isfirst: true,
				headerPosition: "fixed",
				headerTop: null,
				statusTop: null,
				showHeader: true,
				swiperList: [{
						page_image: '/static/img/t1.jpg'
					},
					{
						page_image: '/static/img/t2.jpg'
					},
					{
						page_image: '/static/img/t3.jpg'
					}
				],
				dotStyle: false,
				cardCur: 0,
				notelist:[],
			}
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		onLoad() {
			this.statusHeight = 0;
			// #ifdef APP-PLUS
			this.showHeader = false;
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
			this.headerTop = 50;
			this.statusTop = 50;
		},
		onReady() {},
		onShow: function(e) {
			this.loadNotelist();
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		computed: mapState(['hasLogin', 'userInfo']),
		methods: {
			loadNotelist(){
				var _self = this;
				uniCloud.callFunction({
					name: "get_note" 
				}).then((res) => {
					const {
						result
					} = res
					_self.notelist = result.data
				})
			},
			toupload(index) {
				uni.setStorageSync('tbIndex', index);
				uni.navigateTo({
					url: '../workorder/upload'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
				this.isfirst = false;
			},
			isLogin() {
				//实际应用中,用户登录状态应该用token等方法去维持登录状态.
				const value = uni.getStorageSync('UserInfo');
				if (value) {
					return true;
				}
				return false;
			},
			toPage(url) {
				if (!url) {
					uni.showToast({
						title: '模板未包含此页面',
						icon: "none"
					});
					return;
				}
				uni.navigateTo({
					url: url
				})
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},

		}
	}
</script>
<style lang="scss">
	.page {
		width: 100vw;
	}

	page {
		position: absolute;
		background-color: #fff;
	}

	.cylist {
		justify-content: left;
	}

	.flex-childsub {
		display: flex-grow;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.place {
		background-color: #fff;
		height: 50upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.place-1 {
		height: 20upx;
	}

	.place-bottom {
		height: 300upx;
	}

	.bg-menu {
		/* background-color: #0081ff; */
		color: #2C405A;
		border: 1px solid #0081ff !important;
		border-radius: 10upx;
		min-width: 40px;
	}

	.user {
		width: 100%;
		height: 400upx;
		display: flex;
		align-items: center;
		// position: relative;
		background-image: linear-gradient(45deg, #0081ff, #0081ff);
		border-radius: 0 0 10% 10%;
		padding-bottom: 120upx;
		padding-top: 80upx;

		.right {
			width: 100%;

			.username {
				font-size: 36upx;
				color: #fff;
			}

			.signature {
				color: #eee;
				font-size: 28upx;
			}
		}


	}

	.toolbar {
		width: 92%;
		margin: 0 8% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
		border-radius: 15upx;

		.title {
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.box {
				width: 33%;
				margin-bottom: 30upx;
				margin-top: 30upx;

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #3d3d3d;
					padding-bottom: 10upx;
				}


				.text-num {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 48upx;
					color: #FF0000;
				}
			}
		}
	}
	
	
	.adsec {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding: 7rpx 10rpx;
		font-size: 24rpx;
		line-height: 90rpx;
		border-bottom: 1px solid #CCCCCC;
		/* height: 90rpx; */
	}
	
	.adsec-icon {
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.swiper_container {
		height: 40rpx;
		width: 95%;
		line-height: 40rpx;
	}
	
	
</style>
